<template>
  <div class="navTab">
    <div
      class='tabList'
      v-for="(item,index) in navList"
      :key='index'>
      <div
        class="icon"
        :class='`icon${index}`'
        @click='()=>{_handleTab(item.path,index)}'
        :style="{backgroundImage: `url(${navIndex === index ? item.activeIcon:item.icon}) ` }"></div>
    </div>
  </div>
</template>

<script>
  import config from '@/assets/utils/config.js'

  export default {
    data() {
      return {
        navList: config.tabNab,
        navIndex: 1
      }
    },
    created() {
      const pathName = this.$router.history.current.name
      if (pathName == 'Me') {
        this.navIndex = 2
      }
      if (pathName == 'Catch') {
        this.navIndex = 0
      }

    },
    methods: {
      _handleTab(path, index) {
        this.navIndex = index
        if (path === '/me') {
          this.$router.push({
            path: `${path}/`,
          })

          return
        }
        this.$router.push({
          path: path
          // query: { key: value, key: value }
        })
      }
    },
    watch: {
      '$route': function(route) {
        const routeName = route.name
        if (routeName == 'Catch') {
          this.navIndex = 0
        } else if (routeName == 'Me') {
          this.navIndex = 2
        } else {
          this.navIndex = 1
        }
      }
    }

  }
</script>
<style scoped lang="scss">

  .navTab {
    width: 750px;
    height: 109px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;

    .tabList {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        background: url("") no-repeat center;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
      }

      .icon0 {
        width: 46px;
        height: 46px;
      }

      .icon1 {
        width: 40px;
        height: 48px;
      }

      .icon2 {
        width: 48px;
        height: 48px;
      }
    }
  }
</style>
